/***
 * 1.用户登录功能
 *   1.1收集并校验数据
 *   1.2提交数据到服务器
 *   1.3缓存服务器响应的数据
 *   1.4跳转首页
 */
document.querySelector('#btn-login').addEventListener('click',async()=>{
    //1.1收集并校验数据
        //1.1.1收集数据 
        const form=document.querySelector('.login-form')
        const data=serialize(form,{empty:true,hash:true})
        console.log(data);
        const {username,password}=data
        // 1.1.2校验数据
            //非空校验
            if(!username||!password){
                // 调用通用js中封装的轻提示函数提示用户
                showToast('用户名和密码不能为空')
                return
            }
            // 格式校验
            if(username.length<8||username.length>30||password.length<6||password.length>30){
                // 调用通用js中封装的轻提示函数提示用户
                showToast('用户名的长度为8-30，密码的长度为6-30') 
                return
            }
    // 1.2 提交数据
    try {
        const res= await axios.post('/login',{username,password})
        // console.log(res);
        showToast(res.message)
        //1.3缓存服务器响应的数据
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('username',res.data.username)       
        //1.4 延时,跳转首页
        // 延时是为了让提示框显示
        setTimeout(()=>{
            location.href='./index.html'
        },1500)
    } catch (error) {
        // console.dir(error)
        showToast(error.response.data.message)
    }

})